<template>
  <div>
    <div class="content_wrap">
      <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入juqery和ztree文件
  import '../../plugins/zTree_v3/js/jquery-1.4.4.min.js'
  import '../../plugins/zTree_v3/js/jquery.ztree.core.min.js'
  import '../../plugins/zTree_v3/js/jquery.ztree.excheck.min.js'

export default {
      name:"ztree",
      data() {
        return {
          techChildJobsData: [],  //点击，动态加载的职务
          setting:{
            callback: {
                onCheck: this.zTreeOnCheck,       //用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
                onClick: this.zTreeOnClick,
            },
            check: {
              enable: true
            },
            data: {
              simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
              }
            }
          },
         code: null,
        }
  },

  mounted() {

    let majorDataArray = majorData.majorData;     //获取对应的数据

    var zNodes = eval(majorDataArray);            //将获取的对象数据转为数组的形式

    $(document).ready(()=>{
      $.fn.zTree.init($("#treeDemo"), this.setting, zNodes);
      this.setCheck();
      $("#py").bind("change", setCheck);
      $("#sy").bind("change", setCheck);
      $("#pn").bind("change", setCheck);
      $("#sn").bind("change", setCheck);
    });

  },

  created() {

  },

  methods:{
    setCheck(){
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        py = $("#py").attr("checked")? "p":"",
        sy = $("#sy").attr("checked")? "s":"",
        pn = $("#pn").attr("checked")? "p":"",
        sn = $("#sn").attr("checked")? "s":"",
        type = { "Y":py + sy, "N":pn + sn};
      zTree.setting.check.chkboxType = type;
      this.showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    },

    showCode(str) {
      if (!this.code) this.code = $("#code");
      this.code.empty();
      this.code.append("<li>"+str+"</li>");
    },

    zTreeOnCheck(event, treeId, treeNode) {              //用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
        // alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
        alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked);
        console.log(treeNode)
    },

	 zTreeOnClick(event, treeId, treeNode) {  //点击事件，点击动态的加载子节点
         const treeObj = $.fn.zTree.getZTreeObj("treeDemo");
         const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null); //获取指定父节点
         treeObj.addNodes(parentZNode, this.techChildJobsData, false);
         if(treeNode.level >= 1) {                 //如果点击的层级为1，则向父组件传值
            this.$emit("majorClick",treeNode)       //触发父组件的方法并将选中的专业传给父组件
         }
      },
  }

}
</script>

<style scoped>

</style>
